@tailwind base;
@tailwind components;
@tailwind utilities;
@plugin @tailwindcss/typography;

@font-face {
  font-family: 'Geist';
  src: url('./geist.ttf') format('truetype');
}

@layer base {
  :root {
    --base-50: 210 28% 100%;
    --base-100: 210 28% 98.1%;
    --base-200: 214.3 21.44% 93.4%;
    --base-300: 212.7 17.44% 85.9%;
    --base-400: 215 12.16% 67.1%;
    --base-500: 215.4 9.04% 48.9%;
    --base-600: 215.3 11.44% 36.5%;
    --base-700: 215.3 16% 28.7%;
    --base-800: 217.2 22.08% 19.5%;
    --base-900: 222.2 33.92% 13.2%;
    --base-950: 222.2 33.92% 13.2%;
    --base-1000: 0 0% 1.2%;

    --primary-50: 225.9 100% 96.7%;
    --primary-100: 226.5 100% 93.9%;
    --primary-200: 228 96.5% 88.8%;
    --primary-300: 229.7 93.5% 81.8%;
    --primary-400: 234.5 89.5% 73.9%;
    --primary-500: 238.7 83.5% 66.7%;
    --primary-600: 243.4 75.4% 58.6%;
    --primary-700: 244.5 57.9% 50.6%;
    --primary-800: 243.7 54.5% 41.4%;
    --primary-900: 242.2 47.4% 34.3%;
    --primary-950: 242.2 47.4% 34.3%;
    --primary-1000: 249 55.9% 13.3%;

    --white: 0 0% 100%;
    --black: 0 0% 0%;

    --container: var(--white);
    --background: var(--white);
    --foreground: var(--base-800);
    --card: 0 0% 100%;
    --card-foreground: var(--base-800);
    --popover: 0 0% 100%;
    --popover-foreground: var(--base-800);
    --primary: var(--primary-600);
    --primary-foreground: 0 0% 100%;
    --secondary: var(--base-200);
    --secondary-foreground: var(--base-700);
    --muted: var(--base-100);
    --muted-foreground: var(--base-400);
    --accent: var(--base-100);
    --accent-foreground: var(--base-800);
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: var(--base-200);
    --input: var(--base-300);
    --ring: var(--primary-600);
    --chart-1: var(--primary-600);
    --chart-2: var(--primary-200);
    --chart-3: var(--primary-400);
    --chart-4: var(--primary-300);
    --chart-5: var(--primary-100);
    --radius: 0.75rem;
    --sidebar: 0 0% 100%;
    --sidebar-foreground: var(--base-800);
    --sidebar-primary: var(--primary-600);
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: var(--base-50);
    --sidebar-accent-foreground: var(--base-800);
    --sidebar-border: var(--base-200);
    --sidebar-ring: var(--primary-600);

    --display-weight: 700;
    --text-weight: 400;

    --usage-low: 142 71% 45%; /* 亮绿 */
    --usage-mid: 48 96% 53%; /* 亮黄 */
    --usage-high: 0 72% 51%; /* 亮红 */
  }

  .dark {
    --container: var(--black);
    --background: var(--base-950);
    --foreground: var(--base-200);
    --card: var(--base-900);
    --card-foreground: var(--base-200);
    --popover: var(--base-900);
    --popover-foreground: var(--base-200);
    --primary: var(--primary-600);
    --primary-foreground: 0 0% 100%;
    --secondary: var(--base-700);
    --secondary-foreground: var(--base-50);
    --muted: var(--base-800);
    --muted-foreground: var(--base-500);
    --accent: var(--base-800);
    --accent-foreground: var(--base-200);
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: var(--base-800);
    --input: var(--base-700);
    --ring: var(--primary-600);
    --chart-1: var(--primary-600);
    --chart-2: var(--primary-200);
    --chart-3: var(--primary-400);
    --chart-4: var(--primary-300);
    --chart-5: var(--primary-100);
    --sidebar: var(--base-900);
    --sidebar-foreground: var(--base-200);
    --sidebar-primary: var(--primary-600);
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: var(--base-800);
    --sidebar-accent-foreground: var(--base-200);
    --sidebar-border: var(--base-800);
    --sidebar-ring: var(--primary-600);

    --usage-low: 142 40% 60%; /* 暗绿 */
    --usage-mid: 48 80% 60%; /* 暗黄 */
    --usage-high: 0 70% 65%; /* 暗红 */
  }
}
@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-transparent text-foreground font-text;
  }
  html {
    font-family:
      'Geist',
      Noto Sans,
      ui-sans-serif,
      system-ui,
      sans-serif,
      'Apple Color Emoji',
      'Segoe UI Emoji',
      'Segoe UI Symbol',
      'Noto Color Emoji';
  }
}

@layer base {
  .font-display {
    font-weight: var(--display-weight);
  }
  .font-text {
    font-weight: var(--text-weight);
  }
}
